<template>
	<div id="personage">
		<div class="gerenxx">	
		<!--顶部样式-->
		<div class="head-bg">
			<div class="head-black">
				<a href="#/shezhi01">
				<div class="left-arrow">
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/left-arrow.png" />
				</div>
				</a>
				<div class="head-center">
					<p>个人信息</p>
				</div>
				<div class="head-right">
					<p>速度</p>
				</div>
			</div>
		</div>
		<!---->
		
		<div class="tns">
			<div class="liangtou">
			<p>头像</p>
			<div class="right">
					<p>></p>
				<img src="../../assets/img/fenlei/china.png" />
			</div>
		</div>
		</div>
		<ul class="nicheng">
			<li class="xiu">
				<p class="nc">昵称</p>
				<p class="xia">夏至未至></p>
			</li>
			<li class="haoma">
				<p class="nc">手机号</p>
				<p class="xia">15012340809></p>
			</li>
		</ul>	
		</div>
		<!--修改昵称-->
		<div class="xiugai">
			<!--顶部样式-->
		<div class="head-bg">
			<div class="head-black">
				<a href="#/shezhi01">
				<div class="left-arrow">
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/left-arrow.png" />
				</div>
				</a>
				<div class="head-center">
					<p>修改昵称</p>
				</div>
				<div class="baocun">
					<p>保存</p>
				</div>
			</div>
		</div>
		<div class="xgnc">
			<input type="text" name="weizhi" id="weizhi" value="夏至未至" />
		</div>
		</div>
		<!--修改手机号-->
		
		<div class="xiugai01">
			<!--顶部样式-->
		<div class="head-bg">
			<div class="head-black">
				<a href="#/shezhi01">
				<div class="left-arrow">
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/left-arrow.png" />
				</div>
				</a>
				<div class="head-center">
					<p>修改手机号</p>
				</div>
				<div class="baocun">
					<p>保存</p>
				</div>
			</div>
		</div>
		<div class="xgnc">
			<input type="text" name="weizhi" id="weizhi" value="132132132131" />
		</div>
		</div>
		<!---->
	</div>
</template>

<script>
	export default{
		components:{
			
		},
		methods:{
			xiugai:function(){
				$(".xiu").click(function(){
					$(".gerenxx").css("display","none");
					$(".xiugai").css("display","block");
				});
				$(".haoma").click(function(){
					$(".gerenxx").css("display","none");
					$(".xiugai01").css("display","block");
				});
			}
		},
		mounted:function(){
			this.xiugai();
		}
	}
</script>

<style>
	#personage{
		display: none;
	}
	html {
		background: #f2f2f2;
	}
	
	#app {
		overflow: hidden;
	}
	.xiugai01{
		display: none;
	}
	.xiugai{
		display: none;
	}
	.gerenxx{
		display: block;
	}
	.baocun{
		color: white;
		font-size: 3rem;
	}
	.head-bg {
		background: #e53e42;
		width: 100%;
		height: 9.6rem;
	}
	
	.shezhi-content {
		border: 0.1rem solid darkgray;
	}
	
	.head-black {
		margin: 0 auto;
		padding-top: 3.1rem;
		display: flex;
		justify-content: space-between;
		width: 95%;
	}
	
	.left-arrow img {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	.head-center {
		font-size: 3.4rem;
		color: white;
	}
	
	.head-right {
		opacity: 0;
	}
	.tns {
		background: white;
		width: 100%;
		height: 14rem;
		border-bottom: 0.1rem solid gainsboro;
	}
	.liangtou{
		padding: 2rem;
		margin: 0 auto;
		width: 95%;
		display: flex;
		justify-content: space-between;
	}
	.liangtou p{
		font-size: 2.7rem;
		line-height: 12rem;
	}
	.right img{
		float: right;
		width: 10rem;
		height: 10rem;
	}
	.right p{
		float: right;
	}
	.nicheng{
		width: 100%;
		height: 20rem;
	}
	.nicheng li{
		background: white;
		width: 100%;
		height: 10rem;
		border-bottom: 0.1rem solid gainsboro;
	}
	.nicheng li .nc{
		float: left;
		margin-left: 2rem;
		line-height: 10rem;
		font-size: 2.7rem;
	}
	.nicheng li .xia{
		float: right;
		margin-right: 2rem;
		line-height: 10rem;
		font-size: 2.7rem;
	}
	.xgnc{
		border-bottom: 0.1rem solid gray;
	}
	#weizhi{
		font-size: 3rem;
		line-height: 10rem;
		width: 100%;
		height: 10rem;
		background: #f2f2f2;
	}
</style>